<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer {
            border: 1px solid green;
            width: 700px;
            height: 800px;
            margin: auto;
            padding-top: 20px;
        }

        table {
            margin: auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        th,
        td {
            width: 120px;
            height: 30px;
            text-align: center;
        }
        #add_btn{
            color: #fff;
            background-color: green;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }

        #del_btn{
            color: #fff;
            background-color: red;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }

        #outer a{
            text-decoration: none;
            color: red;
            font-size: 12px;
        }
        #phone_name{
            height: 25px;
            width: 200px;
            border: 1px solid orangered;
            border-radius: 5px;
        }

        #search_btn{
            color: #fff;
            background-color: green;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div style='width: 616px;margin: auto'>
            <h5>任务一:全选和全不选;任务二:完成添加一行</h5>
            <h6>任务三:删除选中行;任务四:删除单行</h6>
            <h6>任务五:模糊查询</h6>
            <h6>任务六:改变购物车数量 => 可编辑表格<br>
               1. 双击td-td内部会出现一个input输入框<br>
               2. td内部原来的值应该要被设置到这个input框中<br>
               3. 可以在input框中重新输入一个数量
               4. 给这个input增加onblur事件=>td中移除input,input输入的新值要出现在td中
            </h6>
        </div>

        <div style="width: 616px;margin: auto;">
            <button id="add_btn" type="button" onclick="addLine()">添加一行</button>
            <button id="del_btn" type="button" onclick="del()">删除选中行</button>
        </div>
        <div style="width: 616px;margin:5px auto;">
            <!-- 失去焦点事件onblur -->
            <input type="text" id="phone_name" placeholder="输入商品名称模糊查询" v-model:value="sechdata">
            <button @click="search()">查询</button>
        </div>
        <div style="margin-top: 5px;">
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>购买数量</th>
                        <th>操作选项</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in carts2" :key="item.id">
                        <td><input type="checkbox" class="ck"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <!-- 双击事件 -->
                        <td>3</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <span style="color: red;font-size: 20px;">总价:<span id="total_span">0元</span></span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <script src="../js/decimal.js"></script>
    <script src='plugins/vue2.js'></script>
    <script>
        new Vue({
            el:'#outer',
            data:{
                carts:[
                    {"id":1001,"name":"iphone16","price":4999.99,"num":3},
                    {"id":1002,"name":"iphone15","price":3999.99,"num":3},
                    {"id":1003,"name":"iphone14","price":2999.99,"num":10},
                    {"id":1004,"name":"iphone13","price":2000,"num":2},
                    {"id":1005,"name":"iphone12","price":3000,"num":5}
                ],

                // carts2:[
                //     {"id":1001,"name":"iphone16","price":4999.99,"num":3},
                //     {"id":1002,"name":"iphone15","price":3999.99,"num":3},
                //     {"id":1003,"name":"iphone14","price":2999.99,"num":10},
                //     {"id":1004,"name":"iphone13","price":2000,"num":2},
                //     {"id":1005,"name":"iphone12","price":3000,"num":5}
                // ],

                sechdata:''
            },
            methods:{
                search(){
                    // console.log(this.sechdata)
                    this.carts2=this.carts.filter(c=>c.name.indexOf(this.sechdata)!=-1)
                }
            },
            computed:{
                //因为此处的sechdata在不断发生变量,所以会重新计算
                carts2(){
                    return this.carts.filter(c=>c.name.indexOf(this.sechdata)!=-1)
                }
            }
        });
    </script>
</body>
</html>